<template>
  <XtxTabs v-model="activeName" class="member-order" @tabClick="changeTab">
    <XtxTabsPanel v-for="(item, index) in orderStatus" :key="index" :label="item.label" :name="item.name" >
    </XtxTabsPanel>
  </XtxTabs>
  <!-- 订单列表 -->
  <div class="order-list">
    <div v-if="loading" class="loading"></div>
    <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
    <OrderItem v-for="(item, index) in orderList" :key="item.id" :order="item" @getOrderList="getOrderList" @on-logistics="handlerLogistics" @on-cancel="handlerCancel" />
  </div>
  <!-- 分页 -->
  <el-pagination
   :hide-on-single-page="pagination.total === 0"
    background layout="sizes, prev, pager, next, total"
    :total="pagination.total" 
    :page-sizes="[5, 10, 15, 20]" 
    v-model:page-size="pagination.pageSize" 
    v-model:currentPage="pagination.page"
    @size-change="getOrderList"
    @current-change="getOrderList"
    >
  </el-pagination>
  <!-- 取消原因 -->
  <OrderCancel ref="OrderCancel"></OrderCancel>
  <!-- 查看物流组件 -->
  <OrderLogistics ref="OrderLogistics"></OrderLogistics>
</template>

<script>
import { onMounted, reactive, ref } from 'vue';
import { orderStatus } from '@/api/constants'
import XtxTabsPanel from '@/components/library/xtx-tabs-panel.vue';
import OrderItem from './components/order-item.vue'
import { findOrderList } from '@/api/order'
import OrderCancel from './components/order-cancel'
import OrderLogistics from './components/order-logistics'
export default {
  components: { XtxTabsPanel, OrderItem, OrderCancel, OrderLogistics },
  setup() {
    const activeName = ref("all");
    const loading = ref(false)
    // 获取数据
    const orderList = ref([])
    // 分页
    const pagination = reactive({
      total:0,
      page:1,
      pageSize:5,
      orderState: 0
    })
    const getOrderList = async () => {
      loading.value = true
      const res = await findOrderList(pagination)
      pagination.total = res.result.counts
      orderList.value = res.result.items
      loading.value = false
    }
    onMounted(() => {
      getOrderList()
    })
    const changeTab = (tab) => {
      pagination.page = 1
      pagination.pageSize = 5
      pagination.orderState = tab.index
      getOrderList()
    }
    return {
      activeName,
      changeTab,
      orderStatus,
      orderList,
      loading,
      pagination,
      getOrderList,
      ...useLogistics(),
      ...useCancelOrder()
    };
  }
}
// 查看物流逻辑
export const useLogistics = () => {
  const OrderLogistics = ref(null)
  const handlerLogistics = (order) => {
    OrderLogistics.value.open(order)
  }
  return { handlerLogistics, OrderLogistics }
}
// 取消订单逻辑
export const useCancelOrder = () => {
  const OrderCancel = ref(null)
  const handlerCancel = (order)=> {
    OrderCancel.value.open(order)
  }
  return { OrderCancel, handlerCancel }
}
// 确认收货逻辑
</script>



<style lang="scss" scoped>
 .el-pagination {
  justify-content: center;
  margin-top: 20px;
  ::v-deep .el-pager{
    .is-active{
      background: $xtxColor !important;
    }
  }
}

.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  .loading{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
    background:  rgba(245,245,245,.9) url('@/assets/images/loading.gif') no-repeat center;
    min-height: 80vh;
  }
  .none {
    height: 400px;
    text-align: center;
    line-height: 400px;
    color: #999;
  }
}
</style>